<!-- 单据 -->
<template>
	<view>
		<hx-navbar ref="hxnb" :config="config"></hx-navbar>
		<u-scroll-list :indicator="false" class="p-b-0">
			<view class="top-view p-t-20">
				<view class="flex flex-sa f-35 m-b-10">
					<view class="f-35 t_item">
						<view class="flex flex-c f-32 text-color"> 总收入 </view>
						<view class="flex flex-c f-30 m-b-10"> {{total_data.amountReceive||0}} </view>
					</view>
					<view class="f-35 t_item">
						<view class="flex flex-c f-32 text-color"> 总支出 </view>
						<view class="flex flex-c f-30 m-b-10"> {{total_data.amountPay ||0}} </view>
					</view>
					<view class="f-35 t_item">
						<view class="flex flex-c f-32 text-color"> 累存 </view>
						<view class="flex flex-c f-30 m-b-10"> {{total_data.debtTotal||0}} </view>
					</view>
				</view>
				<view class="flex flex-c p-b-20" style="opacity: 0.7;">
					<text>前存</text>
					<text class="p-l-8" v-if="total_data.originDebt">-{{total_data.originDebt}}</text>
					<text class="p-l-8" v-else>0</text>
				</view>
			</view>
		</u-scroll-list>
		<view class="timebox flex flex-sb p-l-40 p-r-40 p-t-20 p-b-20">
			<view class="flex-c grey p-t-8 p-b-8">{{time}}</view>
			<view class="time flex" style="align-items: center;">
				<text class="grey">日期</text>
				<view class="flex" style="flex-direction: column;">
					<u-icon name="arrow-up-fill" size="1"></u-icon>
					<u-icon name="arrow-down-fill" size="1" color="#2979ff" class="m-t-16"></u-icon>
				</view>
			</view>
		</view>
		
		<view class="list-box">
			<view class="dl-item flex" v-for="(item,index) in indexList" :key="index" @click="toNext(item)">
				<view class="dt-box">
					<u-avatar
					    fontSize="16"
						size="50"
					    randomBgColor
					    :text="item.billTypeName.substring(0,2)"
					></u-avatar>
				</view>
				<view class="dd-box">
					<view class="time f-32 p-t-10" style="color:#333;">{{item.comegoName}}</view>
					<view class="time p-b-10 p-t-10">{{item.businessTime}}</view>
					<view class="order-id p-b-20">{{item.billNo}}</view>
					<view class="time p-b-16" style="position: absolute;bottom: 4rpx; right: 4rpx;">累存：{{item.debtTotal || 0}}</view>
					<view class="money f-40 red" v-if="item.amountPayable>0">
						+{{item.amountPayable}}
					</view>
					<view class="money f-40" v-else-if="item.amountPayable==0">
						{{item.amountPayable}}
					</view>
					<view class="money f-40 green" v-else>
						{{item.amountPayable}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { reconciliationGorouter } from '@/utils/util.js'
	import { finAmountListPage,finAmountListPage_footing } from "@/apis/bill/reconciliation";
	export default {
		name: '',
		data() {
			return {
				config: {
				  title: "客户对账表",
				  color: "#ffffff",
				  //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
				  backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
				  rightButton: [
				    {
				      key: "btn1",
				      icon: "&#xe888;",
				      position: "left",
				    },
				  ],
				},
				total_data: {},
				params: {
					data: {},
					page: {
						current: 1,
						size: 999,
						order: "desc",
						orders: [
						  {
						    "column": "business_time",
						    "asc": false
						  }
						]
					}
				},
				indexList: [],
				time: '',
			}
		},
		onLoad(opt) {
			let {accountId, accountName,time} = opt;
			this.config.title = opt.accountName;
			this.time = time;
			this.params.data = {
				accountId, accountName
			};
			this.getList()
			this.getTotal()
		},
		methods: {
			// 获取总数
			getTotal() {
				finAmountListPage_footing(this.params).then(res=>{
					if (!res.flag) return;
					this.total_data = res.data;
				})
			},
			// 列表
			getList() {
				uni.showLoading({
					title: '加载中...'
				})
				finAmountListPage(this.params).then(res=>{
					if (!res.flag) return;
					const data = res.data || {};
					if (this.params.page.current == 1) {
					  this.indexList = data.records || [];
					} else {
					  this.indexList = [...data.records, ...this.indexList];
					}
					uni.hideLoading()
				}).catch(()=>{
					uni.hideLoading()
				})
			},
			// 跳转根据业务类型跳转对应的页面：收款-收款单；销售-销售开单；采购-来货结算；付款-付款单；
		// 跳转根据业务类型跳转对应的页面：收款-收款单；销售-销售开单；采购-来货结算；付款-付款单；
		toNext(val) {
			reconciliationGorouter(val.billType, val.billId,this)
		}
		},
		mounted() {
			
		}
	}
	
</script>

<style lang="scss" scoped>
	.top-view {
		flex: 1;
		background: linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246));
		color: #fff;
		.t_item {
			flex: 1;
			position: relative;
			&::after {
				content: "";
				position: absolute;
				right: 0;
				top: 0;
				width: 1rpx;
				height: 70%;
				background: #dfdfdf;
			}
			&:last-child {
				&::after {
					content: "";
					width: 0rpx;
				}
			}
		}
	}
	.list-box {
		padding: 0 20rpx 40rpx;
		.dl-item {
			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			box-shadow: 0 10rpx 20rpx #dfdfdf;
			align-items: center;
			margin-bottom: 20rpx;
			.dd-box {
				flex: 1;
				position: relative;
				color: #999;
				padding-left: 20rpx;
				.money {
					position: absolute;
					right: 0;
					top: 20%;
				}
			}
		}
	}
</style>